@import 'assets/stylesheets/gutenberg-base-styles';

@keyframes gutenboarding_animated_placeholder {
	0% {
		width: 0;
		height: 0;
		opacity: 0;
	}
	1% {
		width: 0;
		height: 76px;
		opacity: 1;
	}
	7% {
		width: 100%;
		height: 76px;
		opacity: 1;
	}
	15% {
		width: 0;
		height: 76px;
		opacity: 1;
	}
	20% {
		width: 0;
		height: 0;
		opacity: 0;
	}
	100% {
		width: 0;
		height: 0;
		opacity: 0;
	}
}

.animated-placeholder {
	z-index: -1;
	position: fixed;
	height: 64px;

	@media ( prefers-reduced-motion: reduce ) {
		// Without animation, we need alternative indication of an input field
		border-bottom: 3px solid var( --studio-blue-40 );
	}
}

.animated-placeholder__suggestion {
	animation: gutenboarding_animated_placeholder 15s infinite;
	color: var( --studio-gray-5 );
	display: block;
	height: 0;
	overflow: hidden;
	top: 72px;
	white-space: nowrap;

	.is-slow-speed & {
		animation: gutenboarding_animated_placeholder 40s infinite;
		color: var( --studio-gray-80 );
	}

	@media ( prefers-reduced-motion: reduce ) {
		animation: none;
	}
}

.animated-placeholder__suggestion:nth-child( 2 ) {
	animation-delay: 3s;
	.is-slow-speed & {
		animation-delay: 18s;
	}
}

.animated-placeholder__suggestion:nth-child( 3 ) {
	animation-delay: 6s;

	.is-slow-speed & {
		animation-delay: 26s;
	}
}

.animated-placeholder__suggestion:nth-child( 4 ) {
	animation-delay: 9s;

	.is-slow-speed & {
		animation-delay: 34s;
	}
}

.animated-placeholder__suggestion:nth-child( 5 ) {
	animation-delay: 12s;

	.is-slow-speed & {
		animation-delay: 42s;
	}
}
